//路由懒加载
import {lazy,Suspense} from 'react'

import { Navigate, useRoutes } from 'react-router-dom'

// 更改为懒加载引入方式
const NotFound = lazy(() => import("../components/404"))
const Login = lazy(() => import("../pages/Login"))
// import Login from '../pages/Login'
const Main = lazy(() => import("../pages/Main"))
const Home = lazy(() => import("../pages/Main/Home"))
const About = lazy(() => import("../pages/Main/About"))
const List = lazy(() => import("../components/List"))

//封装懒加载
const load = (Comp) => {
    return (
      <Suspense >
        <Comp />
      </Suspense>
    )
  }

const routes = [
    {
        path:'/login',
        element:load(Login),
    },
    {
        path:'/main',
        element:load(Main),
        children:[
            {
                path:'/main/home',
                element:load(Home),
                children:[
                    {
                        path:'/main/home/Music/:id',
                        element:load(List)
                    },
                    {
                        path:'/main/home/News/:id',
                        element:load(List)
                    }
                ]
            },
            {
                path:'/main/about',
                element:load(About)
            }
        ]
    },
    {
        path:'*',
        element:load(NotFound)
    },
    {
        path:'/',
        element:<Navigate to='/login' />
    }
]

export default routes;


// //这样的写法,认为定义了 GetRoutes 组件 这个组件就是根据路由表生成的 路由配置结构
// export const GetRoutes = () => {
//     //在组件中在外层可以使用hook
//     return useRoutes(routes)
//   }
  
//   //自定义hooks
//   export const useMyRoutes = () => {
//     //在自定义hooks中是可以使用hook
//     return useRoutes(routes)
//   }